import { defineStore } from 'pinia'
import { ref } from 'vue'

export interface MuseumInfo {
  image: string // base64格式的图片（保留以兼容旧代码）
  images: string[] // 轮播图片数组，base64格式
  location: string // 博物馆位置
  appearance: string // 博物馆形态
  history: string // 历史背景
}

export interface Area {
  id: string // 分区ID
  name: string // 分区名称
  image: string // base64格式的平面图
  mainAreas: string // 主要分区
  visitRoute: string // 参观路线
  areaDetails: string // 分区详情
}

export interface FloorPlanInfo {
  currentAreaId: string // 当前选中的分区ID
  areas: Area[] // 所有分区信息
}

export const useMuseumStore = defineStore(
  'museum',
  () => {
    // 博物馆信息，包含图片和文字介绍
    const museumInfo = ref<MuseumInfo>({
      image: '',
      images: [],
      location: '位于城市中心文化区，交通便利，环境优美。',
      appearance: '博物馆建筑采用中西合璧的设计风格，主体为仿古建筑，融合现代元素，外观庄重典雅。',
      history:
        '始建于1995年，是本地区重要的文化地标，收藏了大量珍贵文物和艺术品，见证了地区文化的发展历程。',
    })

    // 博物馆分区平面图信息
    const floorPlanInfo = ref<FloorPlanInfo>({
      currentAreaId: '1', // 默认选中第一个分区
      areas: [
        {
          id: '1',
          name: '一楼',
          image: '',
          mainAreas: '临时展览区、接待大厅、博物馆商店',
          visitRoute:
            '从入口进入，先参观临时展览区，然后前往接待大厅了解博物馆概况，最后在博物馆商店选购纪念品。',
          areaDetails:
            '【临时展览区】定期更换不同主题的特色展览。\n【接待大厅】提供咨询服务和导览手册。\n【博物馆商店】出售与展览相关的文创产品和纪念品。',
        },
        {
          id: '2',
          name: '二楼',
          image: '',
          mainAreas: '古代文物展区、近代艺术展区',
          visitRoute: '从电梯或楼梯上到二楼，先参观古代文物展区，然后前往近代艺术展区。',
          areaDetails:
            '【古代文物展区】展示了从新石器时代到明清时期的各类文物，包括陶器、青铜器、玉器、书画等。\n【近代艺术展区】展示了近代以来的艺术作品，包括油画、水墨画、雕塑等。',
        },
        {
          id: '3',
          name: '三楼',
          image: '',
          mainAreas: '现代艺术展区、互动体验区',
          visitRoute: '从电梯或楼梯上到三楼，先参观现代艺术展区，然后前往互动体验区。',
          areaDetails:
            '【现代艺术展区】展示了当代艺术家的创新作品，风格多样，题材丰富。\n【互动体验区】设有多媒体互动装置，让参观者通过触摸、操作等方式深入了解展品背后的故事。',
        },
      ],
    })

    // 更新博物馆信息
    function updateMuseumInfo(info: Partial<MuseumInfo>) {
      museumInfo.value = { ...museumInfo.value, ...info }
    }

    // 更新博物馆图片（保留以兼容旧代码）
    function updateImage(base64Image: string) {
      museumInfo.value.image = base64Image
      // 同时添加到轮播图片数组中（如果不存在）
      if (base64Image && !museumInfo.value.images.includes(base64Image)) {
        museumInfo.value.images.push(base64Image)
      }
    }

    // 添加轮播图片
    function addCarouselImage(base64Image: string) {
      if (base64Image && !museumInfo.value.images.includes(base64Image)) {
        museumInfo.value.images.push(base64Image)
      }
    }

    // 删除轮播图片
    function removeCarouselImage(index: number) {
      if (index >= 0 && index < museumInfo.value.images.length) {
        museumInfo.value.images.splice(index, 1)
      }
    }

    // 更新轮播图片顺序
    function updateCarouselImageOrder(fromIndex: number, toIndex: number) {
      if (
        fromIndex >= 0 &&
        fromIndex < museumInfo.value.images.length &&
        toIndex >= 0 &&
        toIndex < museumInfo.value.images.length
      ) {
        const image = museumInfo.value.images.splice(fromIndex, 1)[0]
        museumInfo.value.images.splice(toIndex, 0, image)
      }
    }

    // 设置当前选中的分区
    function setCurrentArea(areaId: string) {
      floorPlanInfo.value.currentAreaId = areaId
    }

    // 更新分区信息
    function updateFloorPlanInfo(areaId: string, info: Partial<Area>) {
      const areaIndex = floorPlanInfo.value.areas.findIndex((area) => area.id === areaId)
      if (areaIndex !== -1) {
        floorPlanInfo.value.areas[areaIndex] = {
          ...floorPlanInfo.value.areas[areaIndex],
          ...info,
        }
      }
    }

    // 更新分区平面图
    function updateFloorPlanImage(areaId: string, base64Image: string) {
      const areaIndex = floorPlanInfo.value.areas.findIndex((area) => area.id === areaId)
      if (areaIndex !== -1) {
        floorPlanInfo.value.areas[areaIndex].image = base64Image
      }
    }

    // 添加新分区
    function addArea(area: Omit<Area, 'id'>) {
      // 生成新的ID (简单实现，实际可能需要更复杂的ID生成逻辑)
      const newId = String(floorPlanInfo.value.areas.length + 1)

      floorPlanInfo.value.areas.push({
        id: newId,
        ...area,
      })

      return newId
    }

    // 删除分区
    function deleteArea(areaId: string) {
      const areaIndex = floorPlanInfo.value.areas.findIndex((area) => area.id === areaId)
      if (areaIndex !== -1) {
        floorPlanInfo.value.areas.splice(areaIndex, 1)

        // 如果删除的是当前选中的分区，则自动选择第一个分区
        if (floorPlanInfo.value.currentAreaId === areaId && floorPlanInfo.value.areas.length > 0) {
          floorPlanInfo.value.currentAreaId = floorPlanInfo.value.areas[0].id
        }

        return true
      }
      return false
    }

    return {
      museumInfo,
      floorPlanInfo,
      updateMuseumInfo,
      updateImage,
      addCarouselImage,
      removeCarouselImage,
      updateCarouselImageOrder,
      updateFloorPlanInfo,
      updateFloorPlanImage,
      setCurrentArea,
      addArea,
      deleteArea,
    }
  },
  {
    persist: true, // 使用持久化存储
  },
)
